<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <title></title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css">
  <link rel="stylesheet" href="css/play.css">
  <!--video-js.css-->
  <!--<link href="css/video-js.css" rel="stylesheet">-->
  <!-- 引入组件 -->
  <script src="js/rem.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.0/lib/vant.min.js"></script>
  <script src="js/axios.js"></script>
  <script src="js/api.js"></script>
</head>
<body>
  <div id="app">
    <div class="my-video">
      <!--<video id='my-video' class="video-js"  controls-->
             <!--:poster='currentVideo.videoImg'>-->
        <!--<source :src='currentVideo.file' type='video/mp4'>-->
        <!--&lt;!&ndash;<source src='MY_VIDEO.webm' type='video/webm'>&ndash;&gt;-->
        <!--&lt;!&ndash;<p class='vjs-no-js'>&ndash;&gt;-->
        <!--&lt;!&ndash;To view this video please enable JavaScript, and consider upgrading to a web browser that&ndash;&gt;-->
        <!--&lt;!&ndash;<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>&ndash;&gt;-->
        <!--&lt;!&ndash;</p>&ndash;&gt;-->
      <!--</video>-->
    </div>

    <div class="btn" @click="toDetails('download.html')">打开APP客户端，选择高清画质</div>

    <div class="main">
      <div class="tab">
        <div class="tab-item" :class="[tabIndex == index && 'active']" v-for="(item,index) in tab" :key="index"
             @click="selTab(index)">{{item.name}}
        </div>
        <div class="tab-position"
             :style="'left:'+ Number(tabIndex)*(100 / tab.length) +'%; width: '+ (100 / tab.length) + '%'">
          <div class="tab-line"></div>
        </div>
      </div>
      <div class="list">
        <div class="item" v-for="(item,index) in list" :key="index"
             @click="playVideo(item)">
          <div class="img">
            <img :src="item.videoImg" alt="">
            <span class="label" v-if="item.isFree==1">免费试听</span>
          </div>
          <div class="content">
            <div class="name" :class="[currentVideo_fileId == item.fileId && 'active']">{{item.fileName}}</div>
            <div class="bottom">
              <span class="time">上传时间：{{item.createTime}}</span>
              <span class="download-btn" v-if="item.isDownload==0"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  let vant = window.vant;
  let app = new Vue({
    el: '#app',
    data: {
      classId: null,
      courseType: null,
      tab: [
        {
          name: '视频',
          type: 1,
        },
        {
          name: '音频',
          type: 2
        },
        {
          name: '学习资料',
          type: 3
        },
      ],
      list: [],
      tabIndex: 0,
      currentVideo_fileId: null,//当前播放的视频
      currentVideo:{
        classId: 0,
        description: '',
        file: '',
        fileId: '',
        fileType: '',
        videoImg: ''
      }
    },
    methods: {
      // 切换状态
      selTab(index) {
        if (index>0){
          window.location.href = 'download.html'
        }else{
          this.tabIndex = index
          this.getDetails()
        }
      },
      toDetails(url) {
        window.location.href = url
      },
      // 获取地址栏参数的方法
      getUrlParam(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        let r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
      },
      // 获取课程列表
      getDetails(){
        api.getListShare({
          classId: this.classId,
          courseType: this.courseType,
          type: this.tab[this.tabIndex].type,
          // page: 1,
          // size: 3,
        }).then(res=>{
          console.log(res,'获取课程列表');
          if (res.msg=='success') {
            let data = res.data;
            this.list = data.list;
            let list = res.data.list;
            for(let i=0;i<list.length;i++){
              if (i==0&&list[i].isFree==1){
                this.currentVideo_fileId = list[i].fileId;
                this.getVideo(list[i].fileId)
                break;
              } else{
                if (list[i].isFree==1){
                  this.currentVideo_fileId = list[i].fileId;
                  this.getVideo(list[i].fileId)
                  break;
                }else{
                  let old_video = document.getElementsByTagName('video')[0];
                  if (old_video){
                    document.getElementsByClassName('my-video')[0].removeChild(old_video);
                  }
                  let video = document.createElement('video')
                  video.src = '';
                  video.poster = '';
                  video.controls = true;
                  document.getElementsByClassName('my-video')[0].appendChild(video)
                }
              }
            }
            // if (this.list.length>0 && this.list[0].isFree==1){
            //   this.getVideo(this.list[0].fileId)
            // }
          }else{
            vant.Toast(res.msg)
          }
        })
      },
      // 获取当前播放视频
      getVideo(id){
        this.currentVideo_fileId = id;
        api.getVideo({
          fileId: id,
        }).then(res=>{
          console.log(res,'获取当前播放视频');
          if (res.msg=='success'){
            let old_video = document.getElementsByTagName('video')[0];
            if (old_video){
              document.getElementsByClassName('my-video')[0].removeChild(old_video);
            }
            let video = document.createElement('video')
            video.src = res.data.file;
            video.poster = res.data.videoImg;
            video.controls = true;
            document.getElementsByClassName('my-video')[0].appendChild(video)
          }else{
            vant.Toast(res.msg)
          }
        })
      },
      playVideo(item){
        if (item.isFree==1){
          this.getVideo(item.fileId)
        }else{
          vant.Toast('该功能需要付费才能解锁,请先下载app')
          setTimeout(()=>{
            window.location.href='download.html'
          },2000)
        }
      }
    },
    mounted(){
      this.classId = this.getUrlParam('classId');
      this.courseType = this.getUrlParam('courseType');
      this.getDetails()
    },
  })
</script>
<!--<script src='js/video.js'></script>-->
</html>
